<template>

  <!-- tab区域 -->
  <div class="mytab">
    <div style="width:100%;margin:0px auto;height:400px" align="center">
      <slider ref="slider" :options="options" >
        <slideritem v-for="(item,index) in someList" :pageLength="someList.length" :index="index" :key="index" :style="item.style">{{item.html}}</slideritem>
        <div slot="loading">loading...</div>
      </slider>
    </div>
  </div>


</template>

<script>
  import { slider, slideritem } from 'vue-concise-slider'
  import '../mock/index.js'
  export default {
    name: 'mytab',
    data () {
      return {
        msg: 'mytab',
        someList:[],
        options: {
          effect: 'coverflow',
          currentPage: 1,
          thresholdDistance: 100, // 滑动距离阈值判定
          thresholdTime: 300, // 滑动时间阈值判定
          deviation: 300, // 偏移值
          widthScalingRatio: 0.8, // 宽度缩放比例
          heightScalingRatio: 0.8, // 高度缩放比例
          loopedSlides: 2, // 多级滚动时，需要添加前后遍历数
          slidesToScroll:1, // 需要滚动页面的数量
          loop: true ,// 无限循环
          autoplay: 2000 // 自动播放:时间[ms]
        }
      }
    },
    components: {
      slider,
      slideritem,
    },
    created () {
      this.loadTabList();
    },
    methods: {
      loadTabList () {
        this.$axios.get('/test/getTabList').then(res => {
          if (res.data) {
            this.someList = res.data.someList
          }
        })
      },
    }
  }
</script>

<style scoped>
  .mytab{
    margin-top:20px;
    width:90%;
    min-height:400px;
    /*background-color:silver;*/
  }


</style>
